<template>
	<div style="text-align: center; margin-top: 140px">
		<h2>欢迎使用学生宿舍管理系统</h2>
		<div class="register">
			<h3 style="color: #fff">管理员注册</h3>
			<el-form :model="registerForm" :rules="rules" ref="registerFormRef">
				<el-form-item prop="username">
					<el-input
						v-model="registerForm.username"
						style="width: 260px; height: 40px"
						placeholder="账号"
					/>
				</el-form-item>
				<el-form-item prop="email">
					<el-input
						v-model="registerForm.email"
						style="width: 260px; height: 40px"
						placeholder="邮箱"
					/>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						v-model="registerForm.password"
						style="width: 260px; height: 40px"
						type="password"
						placeholder="密码"
						show-password
					/>
				</el-form-item>
				<el-form-item prop="confirmPassword">
					<el-input
						v-model="registerForm.confirmPassword"
						style="width: 260px; height: 40px"
						type="password"
						placeholder="确认密码"
						show-password
					/>
				</el-form-item>
				<el-button
					type="primary"
					style="width: 260px; height: 40px; margin-top: 18px"
					@click="submitForm"
					>注册</el-button
				>
			</el-form>
			<div class="bottom-links">
				<span style="color: red">已有账号？</span>
				<router-link to="/login" style="text-decoration: none; color: #fff"
					>立即登录</router-link
				>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'

const registerFormRef = ref(null)
const registerForm = ref({
	username: '',
	email: '',
	password: '',
	confirmPassword: ''
})

// 自定义验证器：验证确认密码
const validateConfirmPassword = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('请再次输入密码'))
	} else if (value !== registerForm.value.password) {
		callback(new Error('两次输入密码不一致'))
	} else {
		callback()
	}
}

const rules = {
	username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' },
		{ min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
	],
	confirmPassword: [
		{ required: true, message: '请再次输入密码', trigger: 'blur' },
		{ validator: validateConfirmPassword, trigger: 'blur' }
	]
}

const router = useRouter()

const submitForm = async () => {
	if (!registerFormRef.value) return

	registerFormRef.value.validate(async valid => {
		if (valid) {
			try {
				// 用户名检查
				const responseUsername = await axios.post(
					'http://localhost:8080/usernameCheck',
					registerForm.value.username
				)
				if (responseUsername.data) {
					ElMessage({
						showClose: true,
						message: '用户名已存在',
						type: 'warning'
					})
					return
				}

				// 邮箱检查
				const responseEmail = await axios.post(
					'http://localhost:8080/emailCheck',
					registerForm.value.email
				)
				if (responseEmail.data) {
					ElMessage({
						showClose: true,
						message: '邮箱已存在',
						type: 'warning'
					})
					return
				}

				// 将数据封装到对象中
				const data = {
					username: registerForm.value.username,
					password: registerForm.value.password,
					email: registerForm.value.email
				}

				// 注册成功，把数据添加到数据库
				await axios.post('http://localhost:8080/insert', data)

				ElMessage({
					showClose: true,
					message: '注册成功',
					type: 'success'
				})

				setTimeout(() => {
					router.push('/login')
				}, 1000)
			} catch (error) {
				ElMessage({
					showClose: true,
					message: '服务器无响应',
					type: 'warning'
				})
			}
		}
	})
}
</script>

<style>
body {
	margin: 0;
	padding: 0;
	background: url(../assets/images/back.jpg) no-repeat;
	background-size: cover;
	height: 100%;
}

br {
	color: red;
}

@keyframes rainbow {
	0% {
		color: #ffb6c1;
		/* 浅粉红 */
	}

	10% {
		color: #ffd700;
		/* 金色 */
	}

	20% {
		color: #ffffe0;
		/* 浅黄色 */
	}

	30% {
		color: #98fb98;
		/* 苍绿色 */
	}

	40% {
		color: #afeeee;
		/* 苍白绿松石 */
	}

	50% {
		color: #add8e6;
		/* 淡蓝色 */
	}

	60% {
		color: #dda0dd;
		/* 梅红色 */
	}

	70% {
		color: #ffb6c1;
		/* 浅粉红 */
	}

	80% {
		color: #e0ffff;
		/* 浅青色 */
	}

	90% {
		color: #d8bfd8;
		/* 蓟 */
	}

	100% {
		color: #ffb6c1;
		/* 浅粉红 */
	}
}

h2 {
	color: #f1ffff;
	font-size: 24px;
	font-weight: 400;
	animation: rainbow 10s infinite;
}

.register {
	margin: 0 auto;
	width: 400px;
	height: 430px;
	text-align: center;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding-bottom: 20px;
}

.register h3 {
	padding-top: 33px;
	font-size: 23px;
	font-weight: 400;
	margin-bottom: 20px;
}

.register :deep(.el-form) {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.register :deep(.el-form-item) {
	margin-bottom: 15px;
}

.register .bottom-links {
	width: 100%;
	position: absolute;
	bottom: 13px;
	left: 0;
	text-align: center;
}

.register :deep(.el-button) {
	margin-bottom: 60px;
}
</style>
